<template>
    <div style="">
      <Header :left="true" leftText="返回" title="查看活动加严"> </Header>
      <div id="apply" class="apply-box">
        <!-- 文字信息 -->
        <van-row style="margin-top: 10px">
          <van-col>
            <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
          </van-col>
          <van-col class="message" style="margin-top: 5px">查看活动加严</van-col>
        </van-row>
        <div class="divMessage">
          <van-form :style="autoHeight">
            <!-- <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="5"><b>工厂:</b></van-col>
              <van-col span="19">{{ itemsOne.FactoryID }}</van-col>
            </van-row> -->
            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="7" style="color: blue"><b>建议等级:</b></van-col>
              <van-col span="17">{{
                valueABCTypeName
              }}</van-col>
              <!-- <van-popup v-model="showPicker" position="bottom">
                <van-picker show-toolbar :columns="columnsABCType" @confirm="onConfirmABCType" @cancel="showPicker = false">
                  <template #option="option">
                    <div style="
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      ">
                      <div>{{ option.ABCTypeName }}</div>
                    </div>
                  </template>
                </van-picker>
              </van-popup> -->
            </van-row>
          </van-form>
        </div>
  
        <!-- 基本信息 -->
        <NoticeBar color="#1989fa" background="#ecf9ff" style="margin-top: 5px; font-size: 15px; font-weight: bold"
          left-icon="description">基本信息</NoticeBar>
        <van-row style="margin-left: 10px; margin-top: 10px">
          <van-col span="7"><b>加严开始时间:</b></van-col>
          <van-col span="17">
            {{ itemsOne.CreateDatetime }}
          </van-col>
        </van-row>
        <!-- <van-row style="margin-left: 10px; margin-top: 10px">
          <van-col span="7"><b>生产线:</b></van-col>
          <van-col span="17">{{ item.PLineID }}</van-col>
        </van-row> -->
        <van-row style="margin-left: 10px; margin-top: 10px">
          <van-col span="7"><b>加严类型:</b></van-col>
          <van-col span="17">{{
            showAddStrictTypeName(itemsOne.StrictTypeID)
          }}</van-col>
        </van-row>
  
        <van-row style="margin-left: 10px; margin-top: 10px">
          <van-col span="7"><b>生产订单:</b></van-col>
          <van-col span="17">{{ showPOrderIDName(itemsOne.POrderID) }}</van-col>
        </van-row>
        <van-row style="margin-left: 10px; margin-top: 10px">
          <van-col span="7"><b>加严说明:</b></van-col>
          <van-col span="17">{{ itemsOne.StrictDescription }}</van-col>
        </van-row>
  
        <!-- 判定复核 -->
        <NoticeBar color="#1989fa" background="#ecf9ff" style="margin-top: 5px; font-size: 15px; font-weight: bold"
          left-icon="description">判定复核</NoticeBar>
        <van-row style="margin-left: 10px; margin-top: 10px">
          <van-col span="7"><b>复核备注信息:</b></van-col>
          <van-col span="17">{{ itemsOne.ComfirmMemo }}</van-col>
        </van-row>
  
        <!-- 确认审核 -->
        <NoticeBar color="#1989fa" background="#ecf9ff" style="margin-top: 5px; font-size: 15px; font-weight: bold"
          left-icon="description">确认审核</NoticeBar>
        <van-row style="margin-left: 10px; margin-top: 10px">
          <van-field v-model="message" rows="4" style="margin-left: 2px; font-size: medium; color: red" label="审核备注留言"
            type="textarea" maxlength="100" placeholder="请输入留言" show-word-limit @focus="handleClickScroll"
            @blur="handleClickBlur" />
        </van-row>
  
        <!-- <div style="margin: 16px; margin-bottom: 5%">
          <van-button color="#138087" round block type="info" native-type="submit" @click="submitCheck()">确认</van-button>
        </div> -->
      </div>
    </div>
  </template>
    
  <script>
  import {
    Col,
    Row,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    Image as VanImage,
    Picker,
    popup,
    SubmitBar,
    Button,
    Loading,
    Overlay,
    Dialog,
    Toast,
    NoticeBar,
    Tag,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Cascader,
    Calendar,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    AddressList,
    Checkbox,
    CheckboxGroup,
    Step,
    Steps,
  } from "vant";
  
  import "vue-easytable/libs/themes-base/index.css";
  import { VTable } from "vue-easytable";
  import { _httpClient as _httpClientApisie } from "@/libs/apisie";
  import { _httpClient as _httpClientApi } from "@/libs/api";
  import { getToken, getBaseApiFrefix } from "@/libs/auth";
  import Header from "@/components/header.vue";
  import { storage } from "@/libs/utils";
  
  Vue.use(Form);
  Vue.use(Field);
  Vue.use(Overlay);
  Vue.use(Loading);
  Vue.use(Picker);
  Vue.use(popup);
  Vue.use(SubmitBar);
  Vue.use(VanImage);
  Vue.use(DatetimePicker);
  Vue.use(Cascader);
  Vue.use(Calendar);
  Vue.use(Cell);
  Vue.use(RadioGroup);
  Vue.use(Radio);
  Vue.use(Divider);
  Vue.use(Stepper);
  Vue.use(Button);
  Vue.use(AddressList);
  Vue.use(Checkbox);
  Vue.use(CheckboxGroup);
  Vue.use(Col);
  Vue.use(Row);
  Vue.use(Step);
  Vue.use(Steps);
  
  export default {
    name: "jiayanitem",
    components: {
      Form,
      Row,
      Col,
      Button,
      Header,
      Form,
      Cell,
      Icon,
      Field,
      NumberKeyboard,
      Dialog,
      Toast,
      NoticeBar,
      Row,
      Tag,
      popup,
      DatetimePicker,
      ImagePreview,
      CellGroup,
      Uploader,
      Col,
      Calendar,
      Cascader,
      Picker,
      RadioGroup,
      Radio,
      Divider,
      Stepper,
      VTable,
      AddressList,
      Checkbox,
      CheckboxGroup,
    },
    data() {
      return {
        columnsABCType: [
          { ABCType: "1", ABCTypeName: "甲" },
          { ABCType: "2", ABCTypeName: "乙" },
          { ABCType: "3", ABCTypeName: "丙" },
        ],
        itemsOne: {},
        idnex: "",
        message: "",
        valueABCTypeName: "",
        value: "",
        valuess: "",
        columns: ["甲", "乙", "丙"],
        showPicker: false,
        active: 0,
        minDate: new Date(2022, 12, 1),
        nowDate: null,
        form: {
          QCLeaderAdviceDealType: "",
          QCLeaderMemo: "",
          Id: "",
          //班组
          valueteamid: "",
          //订单号码
          pOrderID: "",
          //产品代码
          materialid: "",
          //产品名称
          materialname: "",
          //生产日期
          ProductionDate: "",
          //班次开始日期
          planworkdatetime: "",
          //班次
          pShiftID: "",
          //检验类型
          CheckTypeID: "",
          //包装条码
          BarCode: "",
          //检验备注
          Memo: "",
          ProductionAmount: "",
          //抽样计划1G
          SamplePlan1G: "",
          //抽样计划1Re
          SamplePlan1Re: "",
          //抽检值1
          SamplePlan1Value: "",
          //抽样计划2G
          SamplePlan2G: "",
          //抽样计划2AC
          SamplePlan2AC: "",
          //抽样计划2AQL
          SamplePlan2AQL: "",
          //抽检值2
          SamplePlan2Value: "",
          //生产批次
          BatchID: "",
          //缺陷原因
          QProblemID: "",
          //管理责任
          ManageReasonID: "",
          //生产车间
          WorkshopID: "",
          //领班是否同意
          QCLeaderAgree: "",
        },
        user: [],
        QCLeaderAgreeValue: "",
        plineID: "",
        ManageReasonName: "",
        time: "",
        FactoryID: "",
        valuepShiftName: "",
        CheckTypeName: "",
        QProblemName: "",
        valueteamid: "",
        BeginTime: "",
        WorkPlanDatetimeFrom: "",
        columnsteamId: [],
        showPickerteamid: false,
        showPickerpShiftID: false,
        showPickerDealType: false,
        valueemployid: "",
        columnsshift: [],
        columnsType: [],
        columnsDealType: [],
        columnsManageReason: [
          { ManageReasonID: "0", ManageReasonName: "无异常" },
        ],
        columnsQProblem: [{ QProblemID: "0", QProblemName: "无异常" }],
        showPickerType: false,
        showPickerManageReason: false,
        showPickerQProblem: false,
        item: {},
        valuepDealTypeName: "",
        columnsPOrderID: [],
        columnsStrictTypeID: [
        { StrictTypeID: "SM01", StrictTypeName: "关键工艺参数异常加严" },
        { StrictTypeID: "SM02", StrictTypeName: "机器设备异常加严" },
        { StrictTypeID: "SM03", StrictTypeName: "质量异常加严" },
        { StrictTypeID: "SM04", StrictTypeName: "生产条件异常加严" },
        ],
      };
    },
    destroyed() {
      clearInterval(this.nowtimer);
      this.nowDate = null;
    },
    created: function () {
      this.user = JSON.parse(storage.get("user"));
      this.user.userId = this.user.userName;
      //this.item = api.pageParam.item;
      this.nowDate = new Date().toLocaleString();
      //查询明细
      //this.idnex = api.pageParam.item.Id;
      //alert( api.pageParam.item);
      this.getLeaderUncheckedList( api.pageParam.item);
      this.getPOrderID();
      this.time = new Date();
      this.message =
        this.time.toLocaleString() +
        " 质量部负责人" +
        this.user.userName +
        "已确认并调整等级!";
    },
    mounted() {
      this.checkActive(this.item);
    },
    methods: {
      showAddStrictTypeName(AddStrictType) {
        var AddStrictTypeName = AddStrictType;
        this.columnsStrictTypeID.forEach((item) => {
          if (item.StrictTypeID === AddStrictType) {
            AddStrictTypeName = item.StrictTypeName;
          }
        });
        return AddStrictTypeName;
      },
      showPOrderIDName(POrderID) {
        var POrderIDName = POrderID;
        this.columnsPOrderID.forEach((item) => {
          if (item.POrderID === POrderID) {
            POrderIDName = item.POrderIDAndMaterialName;
          }
        });
        return POrderIDName;
      },
      async getPOrderID() {
        let _this = this;
        try {
          let res = await _httpClientApisie.get(
            _httpClientApisie.getApiPrefix() + "/ProductionOrder/GetList"
          );
          if (res.HttpCode === "200") {
            let teamMap = res.Data.map((item) => ({
              POrderID: item.POrderID,
              MaterialName: item.MaterialName,
              MaterialID: item.MaterialID,
              POrderIDAndMaterialName: item.POrderID + " " + item.MaterialName,
            }));
            _this.columnsPOrderID = teamMap;
          }
        } catch (e) {
          Toast.fail(JSON.stringify(e));
        }
      },
      handleClickScroll() {
        document.body.style.marginBottom = "200px";
        window.scrollTo({ top: 400, behavior: "smooth" });
      },
      handleClickBlur() {
        document.body.style.marginBottom = "0px";
        window.scrollTo({ top: 0 });
      },
      async submitCheck() {
        let _this = this;
        Toast.loading({
          mask: true,
          forbidClick: true,
          duration: 0,
          message: "Loading...",
        });
        try {
          let res = await _httpClientApisie.get(
            _httpClientApisie.getApiPrefix() +
            "/AddStrictManage/GetEntity?id=" +
            _this.idnex
          );
          Toast.clear();
          let dataentity = [];
          dataentity = res.Data;
          let time = new Date();
  
          dataentity.ABCType = _this.form.ABCType;
          dataentity.checked = true;
          dataentity.checkeDatetime = time.toLocaleString();
          dataentity.checkeMan = _this.user.userId;
          dataentity.checkeMemo = _this.message;
  
          //alert(JSON.stringify(dataentity));
          try {
            let res = await _httpClientApisie.post(
              _httpClientApisie.getApiPrefix() + "/AddStrictManage/SaveEntity",
              {
                body: dataentity,
              }
            );
            if (res.HttpCode === "200") {
              Toast.clear();
              Toast.success("保存成功");
              this.$ac.openWin({
                reload: true,
                name: "tightsure",
                url: "./tightenup-tightsure.html",
              });
              setTimeout(function () {
                _this.$ac.closeWin();
              }, 2000);
            } else {
              Toast.clear();
              Toast.fail("保存失败");
            }
          } catch (e) {
            Toast.fail(JSON.stringify(e));
          }
        } catch (e) {
          Toast.fail(JSON.stringify(e));
        }
      },
      checkActive(item) {
        //先判断生产现场主管是否审核且同意
        if (item.TeamLeaderChecked) {
          if (item.TeamLeaderAgree) {
            //若同意，active=5，直接归档
            this.active = 3;
          }
        } else {
          return;
        }
        //判断质量负责人是否审核
        if (item.QCManagerChecked) {
          //if(item.QCManagerAgree){
          //若同意，active=5，直接归档
          this.active = 3;
          //}
          //若不同意，判断生产部门负责人状态
        } else {
          //等待质量负责人审核
          this.active = 1;
          return;
        }
        //判断生产部门负责人是否审核
        //if(item.PrdManagerChecked){
        //if(item.PrdManagerAgree){
        //若同意，active=5，直接归档
        //this.active = 5;
        //}
        //若不同意，判断利润点负责人状态
        //}else{
        //未审核
        //this.active = 2;
        //return;
        //}
        //判断利润点负责人是否同意
        //if(item.FactoryManagerChecked){
        //if(item.FactoryManagerAgree){
        //若同意，active=5，直接归档
        //this.active = 5;
        //}else{
        //若不同意，active=5，也直接归档
        //this.active = 5;
        //}
        //}else{
        //this.active = 3;
        //return;
        //}
      },
      onConfirm(value) {
        this.value = value;
        if (value == "甲") {
          this.valuess = "1";
        }
        if (value == "乙") {
          this.valuess = "2";
        }
        if (value == "丙") {
          this.valuess = "3";
        }
        this.showPicker = false;
      },
      showABCTypeName(ABCType) {
        var ABCTypeName = ABCType;
        this.columnsABCType.forEach((item) => {
          if (item.ABCType === ABCType) {
            ABCTypeName = item.ABCTypeName;
          }
        });
        return ABCTypeName;
      },
      async getLeaderUncheckedList(val) {
        //alert(val);
        let _this = this;
        Toast.loading({
          mask: true,
          forbidClick: true,
          duration: 0,
          message: "Loading...",
        });
        try {
          let res = await _httpClientApisie.get(
            _httpClientApisie.getApiPrefix() +
            "/AddStrictManage/GetOnActiveStrict?PLineID" +
            val
          );
          //alert(JSON.stringify(res.Data));
          Toast.clear();
          _this.itemsOne = res.Data[0];
          _this.valueABCTypeName = _this.showABCTypeName(res.Data[0].ABCType);
        } catch (e) {
          Toast.fail(JSON.stringify(e));
        }
      },
      onConfirmABCType(value, index) {
        this.valueABCTypeName = this.columnsABCType[index].ABCTypeName;
        this.form.ABCType = this.columnsABCType[index].ABCType;
        this.showPicker = false;
      },
      onConfirmDealType(value, index) {
        this.valuepDealTypeName = this.columnsDealType[index].DealTypeName;
        this.form.QCLeaderAdviceDealType = this.columnsDealType[index].DealTypeID;
        this.showPickerDealType = false;
      },
      showTeamIDName(teamID) {
        var teamName = teamID;
        this.columnsteamId.forEach((item) => {
          if (item.teamId === teamID) {
            teamName = item.teamName;
          }
        });
        return teamName;
      },
      showShiftIDName(pShiftID) {
        var pShiftName;
        this.columnsshift.forEach((item) => {
          if (item.pShiftID === pShiftID) {
            pShiftName = item.pshiftname;
          }
        });
        return pShiftName;
      },
      showManageReason(ManageReason) {
        if (ManageReason == "" || null == ManageReason) {
          ManageReason = "0";
        }
        this.columnsManageReason.forEach((item) => {
          if (item.ManageReasonID == ManageReason) {
            this.ManageReasonName = item.ManageReasonName;
          }
        });
      },
      showQProblemID(QProblemID) {
        var QProblemName;
        this.columnsQProblem.forEach((item) => {
          if (item.QProblemID === QProblemID) {
            QProblemName = item.QProblemName;
          }
        });
        return QProblemName;
      },
      showDealType(type) {
        var DealTypeName;
        this.columnsDealType.forEach((item) => {
          if (item.DealTypeID === type) {
            DealTypeName = item.DealTypeName;
          }
        });
        return DealTypeName;
      },
      changeAgreeValue() {
        //如果合格 隐藏页面 直接提交
        if (this.QCLeaderAgreeValue == "1") {
          this.form.QCLeaderAgree = true;
          this.valuepDealTypeName = this.showDealType(this.item.AdviceDealType);
          this.form.QCLeaderAdviceDealType = this.item.AdviceDealType;
          this.form.QCLeaderMemo =
            "品管领班:" + this.user.employeeName + "同意处置意见!";
        } else {
          //若不同意
          this.form.QCLeaderAgree = false;
          this.valuepDealTypeName = "";
          this.form.QCLeaderAdviceDealType = "";
          this.form.QCLeaderMemo =
            "品管领班:" + this.user.employeeName + "不同意处置意见!";
        }
      },
      //获取班组信息
      async getteam() {
        let _this = this;
        try {
          let res = await _httpClient.get(
            _httpClient.getApiPrefix() +
            "/Team/GetList?FactoryID=" +
            _this.item.FactoryID
          );
          if (res.HttpCode === "200") {
            let teamMap = res.Data.map((item) => ({
              teamId: item.TeamID,
              teamName: item.TeamName,
            }));
            _this.columnsteamId = teamMap;
          }
        } catch (e) {
          Toast.fail(JSON.stringify(e));
        }
      },
      //获取班次信息
      async getshift() {
        let _this = this;
        try {
          let res = await _httpClient.get(
            _httpClient.getApiPrefix() +
            "/ProductionShift/GetList?FactoryID=" +
            _this.item.FactoryID
          );
          if (res.HttpCode === "200") {
            for (let index = 0; index < res.Data.length; index++) {
              if (res.Data[index].Actived == false) {
                delete res.Data[index];
              }
            }
            let shiftMap = res.Data.map((item) => ({
              pshiftname: item.PShiftName + " " + item.BeginTime,
              pShiftID: item.PShiftID,
              BeginTime: item.BeginTime,
            }));
            _this.columnsshift = shiftMap;
          }
        } catch (e) {
          Toast.fail(JSON.stringify(e));
        }
      },
      //获取缺陷原因
      async getQualityProblems() {
        let _this = this;
        try {
          let res = await _httpClient.get(
            _httpClient.getApiPrefix() + "/QualityProblems/GetList"
          );
  
          if (res.HttpCode === "200") {
            let temp = res.Data.map((item) => ({
              QProblemID: item.QProblemID,
              QProblemName: item.QProblemName,
            }));
            temp.forEach((item) => {
              _this.columnsQProblem.push(item);
            });
          }
        } catch (e) {
          Toast.fail(JSON.stringify(e));
        }
      },
      //获取建议处置方式
      async getDealType() {
        let _this = this;
        try {
          let res = await _httpClient.get(
            _httpClient.getApiPrefix() + "/QualityDealType/GetList"
          );
          if (res.HttpCode === "200") {
            let temp = res.Data.map((item) => ({
              DealTypeID: item.DealTypeID,
              DealTypeName: item.DealTypeName,
            }));
            temp.forEach((item) => {
              _this.columnsDealType.push(item);
            });
          }
        } catch (e) {
          Toast.fail(JSON.stringify(e));
        }
      },
      //获取管理责任
      async getManageReasonID() {
        let _this = this;
        try {
          let res = await _httpClient.get(
            _httpClient.getApiPrefix() + "/QualityManageReason/GetList"
          );
          if (res.HttpCode === "200") {
            let temp = res.Data.map((item) => ({
              ManageReasonID: item.ManageReasonID,
              ManageReasonName: item.ManageReasonName,
            }));
            temp.forEach((item) => {
              _this.columnsManageReason.push(item);
            });
          }
        } catch (e) {
          Toast.fail(JSON.stringify(e));
        }
      },
      async getCheckType() {
        let _this = this;
        try {
          let res = await _httpClient.get(
            _httpClient.getApiPrefix() + "/QualityCheckType/GetList"
          );
          if (res.HttpCode === "200") {
            let shiftMap = res.Data.map((item) => ({
              CheckTypeName: item.CheckTypeName,
              CheckTypeID: item.CheckTypeID,
            }));
            _this.columnsType = shiftMap;
          }
        } catch (e) {
          Toast.fail(JSON.stringify(e));
        }
      },
      itemClear() {
        this.form.Id = "";
        this.form.valueteamid = "";
        this.form.pShiftID = "";
        this.form.pOrderID = "";
        this.form.materialid = "";
        this.form.materialname = "";
        this.form.planworkdatetime = "";
        this.form.ProductionDate = "";
        this.form.CheckTypeID = "";
        //包装条码
        this.form.BarCode = "";
        //检验备注
        this.form.Memo = "";
        this.form.ProductionAmount = "";
        //抽样数量
        //抽样计划1G
        this.form.SamplePlan1G = "";
        //抽样计划1Re
        this.form.SamplePlan1Re = "";
        //抽检值1
        this.form.SamplePlan1Value = "";
        //抽样计划2G
        this.form.SamplePlan2G = "";
        //抽样计划2AC
        this.form.SamplePlan2AC = "";
        //抽样计划2AQL
        this.form.SamplePlan2AQL = "";
        //抽检值2
        this.form.SamplePlan2Value = "";
        //生产批次
        this.form.BatchID = "";
        //缺陷原因
        this.form.QProblemID = "";
        //管理责任
        this.form.ManageReasonID = "";
        //生产车间
        this.form.WorkshopID = "";
        //检验是否合格
        this.form.QualityOk = "";
        //客户名称
        this.form.CustomerName = "";
        this.QCLeaderAgreeValue = "";
        this.plineID = "";
        this.ManageReasonName = "";
        this.time = "";
        this.FactoryID = "";
        this.valuepShiftName = "";
        this.CheckTypeName = "";
        this.QProblemName = "";
        this.valueteamid = "";
        this.BeginTime = "";
        this.WorkPlanDatetimeFrom = "";
        this.columnsteamId = [];
        this.showPickerteamid = false;
        this.showPickerpShiftID = false;
        this.valueemployid = "";
        this.columnsshift = [];
        this.columnsType = [];
        this.columnsManageReason = [
          { ManageReasonID: "0", ManageReasonName: "无异常" },
        ];
        this.columnsQProblem = [{ QProblemID: "0", QProblemName: "无异常" }];
        this.showPickerType = false;
        this.showPickerManageReason = false;
        this.showPickerQProblem = false;
      },
      onConfirmManageReason(value, index) {
        this.form.ManageReasonID = this.columnsManageReason[index].ManageReasonID;
        this.ManageReasonName = this.columnsManageReason[index].ManageReasonName;
        this.showPickerManageReason = false;
        if (this.form.QProblemID == "0" && this.form.ManageReasonID == "0") {
          this.QCLeaderAgreeValue = "1";
          this.form.QualityOk = true;
        } else {
          this.QCLeaderAgreeValue = "0";
          this.form.QualityOk = false;
        }
      },
      handleClick() { },
    },
  };
  </script>
    
  <style>
  body {
    background-color: white;
  }
  
  .table-title-class {
    background-color: #304156;
    color: #fff;
  }
  
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  
  .buttongroup {
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  
  .container.dwo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .buttonLeft {
    position: fixed;
    bottom: 8px;
    float: left;
    width: 49%;
  }
  
  .formstyle {
    margin-top: 8px;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  
  .radioteam {
    display: flex;
    align-items: center;
    padding-left: 13px;
    margin-top: 10px;
    margin-left: 34px;
    margin-bottom: 10px;
  }
  
  .buttonRight {
    position: fixed;
    bottom: 8px;
    float: right;
    left: 51%;
    width: 49%;
    background-color: #f22028;
    border-color: #f22028;
  }
  
  .textScroll {
    display: inline-block;
    position: fixed;
    top: 5rem;
    bottom: 0rem;
    overflow: scroll;
    right: 0;
    width: 100%;
    z-index: 1;
  }
  
  .message {
    font-size: 15px;
    margin-top: 5px;
    margin-left: -10px;
    font-weight: bold;
  }
  
  .mg5 {
    margin-right: 5px;
  }
  
  .tag_margin {
    margin: 2px 5px;
  }
  
  .card_under {
    height: 100%;
    width: 100%;
    margin: auto;
    background: #ffffff;
    border-radius: 25px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
  }
  
  .card_icon {
    text-align: center;
    /* position: absolute; */
    height: 8rem;
    width: 80%;
    margin: 12% 10%;
    background: rgba(35, 180, 237, 1);
    border-radius: 25px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
  }
  
  .text {
    font-size: 18px;
    color: #4e4a67;
    margin: 8px auto auto 20px;
    line-height: 1.5rem;
    text-align: justify;
    font-weight: 600;
  }
  
  .text_small {
    font-size: 16px;
    color: red;
    margin: 8px auto auto 20px;
    line-height: 1.5rem;
    text-align: justify;
    font-weight: 700;
  }
  
  .text_scan {
    font-size: 16px;
    color: #4e4a67;
    margin: auto auto auto 20px;
    line-height: 1.5em;
    text-align: justify;
  }
  
  .divStyle {
    margin-left: 3px;
    margin-right: 3px;
  }
  
  .divMessage {
    margin-top: 0px;
    border: solid #dcdcdc;
    margin-left: 5px;
    margin-right: 15px;
    border-top-width: 4px;
    border-left-width: 4px;
    border-right-width: 1px;
    border-bottom-width: 1px;
  }
  </style>
    